<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">

    <!--toastr-->
    <link href="../css/plugins/toastr/toastr.min.css" rel="stylesheet"/>

    <!--common.css-->
    <link href="../css/common.css" rel="stylesheet" type="text/css">

    <!--流程表单-->
    <link href="approve_task_form.css" rel="stylesheet">

    <!--签名-->
    <link rel="stylesheet" href="signature.css">

    <!--自定义css-->
    <link href="approve_task.css" rel="stylesheet">
</head>

<body>
<div class="wrapper wrapper-content content-margin">
    <h3 class="flowTitle">
        <span id="flowStartUserName"></span>发起的<span id="flowInstName"></span>流程，流程单号：<span id="flowSn"></span>
    </h3>
    <ul class="nav nav-tabs">
        <li class="active"><a href="#form" data-toggle="tab">流程表单</a></li>
        <li><a href="#approve-record" data-toggle="tab">审批记录</a></li>
        <li><a href="#approve" data-toggle="tab">审批</a></li>
    </ul>
    <div class="tab-content">

        <div class="tab-pane fade in active" id="form">
            <div class="col-sm-6">
                <form id="flowInstForm" class="ldgRight"></form>
            </div>
        </div>

        <div class="tab-pane fade" id="approve-record">
            <div class="col-lg-12 flow-edit flow">
                <div class="row task" taskType="start">
                    <div class="col-lg-2 task-node">
                        <div class="btn btn-primary">开始</div>
                        <div class="line-arrow line-arrow-comp" style="height: 50px;"></div>
                    </div>
                    <div class="col-lg-10 task-property">
                        <div class="col-sm-12">
                            <label class="col-sm-1">附件</label>
                            <div class="col-sm-11 start-attach">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row task" taskType="end">
                    <div class="col-lg-2 task-node">
                        <div class="btn btn-primary">结束</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="tab-pane fade" id="approve">
            <div class="col-sm-6">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">审批结果</label>
                        <div class="col-sm-10">
                            <select name="pass" class="form-control">
                                <option value="1">通过</option>
                                <option value="0">拒绝</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">批示</label>
                        <div class="col-sm-10">
                            <textarea name="inst" class="form-control" rows="3"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-2 control-label">
                            <a href="javascript:void(0);" class="my-file">上传附件
                                <input type="file" id="fileupload" type="file" name="files" multiple>
                            </a>
                        </div>
                        <div class="col-sm-10 preview">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">签字</label>
                        <div class="col-sm-10">
                            <div id="signature-pad" class="signature-pad">
                                <div class="signature-pad--body">
                                    <canvas>
                                        该浏览器不支持签名，请使用谷歌浏览器。
                                    </canvas>
                                </div>
                                <div class="signature-pad--footer">
                                    <div class="signature-pad--actions pull-right">
                                        <div>
                                            <button type="button" class="btn btn-primary btn-xs" data-action="clear">
                                                清空重写
                                            </button>
                                            <button type="button" class="btn btn-primary btn-xs" data-action="undo">
                                                撤销一笔
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button class="btn btn-primary" id="submit">提交审批</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

</div>

<!-- 节点模版 -->
<div id="taskTemplate">
    <div class="row task" taskType="task">
        <div class="col-lg-2 task-node">
            <div class="btn btn-primary">普通任务</div>
            <div class="line-arrow"></div>
        </div>
        <div class="col-lg-10 task-property">
            <div class="col-sm-12">
                <label class="col-sm-1">任务名称</label>
                <div class="col-sm-11" name="name"></div>
            </div>
            <div class="col-sm-12">
                <label class="col-sm-1">任务描述</label>
                <div class="col-sm-11" name="des"></div>
            </div>
            <div class="col-sm-12">
                <label class="col-sm-1">任务办理人</label>
                <div class="col-sm-11" name="assignees"></div>
            </div>
            <div class="col-sm-12">
                <label class="col-sm-1">审批记录</label>
                <div class="col-sm-11" name="approveRecord">
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th>审批人</th>
                            <th>审批结果</th>
                            <th>批示</th>
                            <th>签字</th>
                            <th>任务开始时间</th>
                            <th>审批时间</th>
                            <th>附件</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="row task" taskType="andTask">
        <div class="col-lg-2 task-node">
            <div class="btn btn-primary">并型任务</div>
            <div class="line-arrow"></div>
        </div>
        <div class="col-lg-10 task-property">
            <div class="col-sm-12">
                <label class="col-sm-1">任务名称</label>
                <div class="col-sm-11" name="name"></div>
            </div>
            <div class="col-sm-12">
                <label class="col-sm-1">任务描述</label>
                <div class="col-sm-11" name="des"></div>
            </div>
            <div class="col-sm-12">
                <label class="col-sm-1">任务办理人</label>
                <div class="col-sm-11" name="assignees"></div>
            </div>
            <div class="col-sm-12">
                <label class="col-sm-1">审批记录</label>
                <div class="col-sm-11" name="approveRecord">
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th>审批人</th>
                            <th>审批结果</th>
                            <th>批示</th>
                            <th>签字</th>
                            <th>任务开始时间</th>
                            <th>审批时间</th>
                            <th>附件</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="row task" taskType="orTask">
        <div class="col-lg-2 task-node">
            <div class="btn btn-primary">或型任务</div>
            <div class="line-arrow"></div>
        </div>
        <div class="col-lg-10 task-property">
            <div class="col-sm-12">
                <label class="col-sm-1">任务名称</label>
                <div class="col-sm-11" name="name"></div>
            </div>
            <div class="col-sm-12">
                <label class="col-sm-1">任务描述</label>
                <div class="col-sm-11" name="des"></div>
            </div>
            <div class="col-sm-12">
                <label class="col-sm-1">任务办理人</label>
                <div class="col-sm-11" name="assignees"></div>
            </div>
            <div class="col-sm-12">
                <label class="col-sm-1">审批记录</label>
                <div class="col-sm-11" name="approveRecord">
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th>审批人</th>
                            <th>审批结果</th>
                            <th>批示</th>
                            <th>签字</th>
                            <th>任务开始时间</th>
                            <th>审批时间</th>
                            <th>附件</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="row task" taskType="pointTask">
        <div class="col-lg-2 task-node">
            <div class="btn btn-primary">指定型任务</div>
            <div class="line-arrow"></div>
        </div>
        <div class="col-lg-10 task-property">
            <div class="col-sm-12">
                <label class="col-sm-1">任务名称</label>
                <div class="col-sm-11" name="name"></div>
            </div>
            <div class="col-sm-12">
                <label class="col-sm-1">任务描述</label>
                <div class="col-sm-11" name="des"></div>
            </div>
            <div class="col-sm-12">
                <label class="col-sm-1">任务办理人</label>
                <div class="col-sm-11" name="assignees"></div>
            </div>
            <div class="col-sm-12">
                <label class="col-sm-1">审批记录</label>
                <div class="col-sm-11" name="approveRecord">
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th>审批人</th>
                            <th>审批结果</th>
                            <th>批示</th>
                            <th>签字</th>
                            <th>任务开始时间</th>
                            <th>审批时间</th>
                            <th>附件</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 全局js -->
<script src="../js/jquery.min.js?v=2.1.4"></script>
<script src="../js/bootstrap.min.js?v=3.3.6"></script>

<!--toastr-->
<script src="../js/plugins/toastr/toastr.min.js"></script>

<!--文件上传-->
<script src="../js/plugins/jQuery-File-Upload/vendor/jquery.ui.widget.js"></script>
<script src="../js/plugins/jQuery-File-Upload/jquery.iframe-transport.js"></script>
<script src="../js/plugins/jQuery-File-Upload/jquery.fileupload.js"></script>

<!--common.js-->
<script src="../js/common.js"></script>

<!-- 流程表单 -->
<script src="approve_task_form.js"></script>

<!--签名-->
<script src="../js/plugins/signature/signature_pad.min.js"></script>
<script src="signature.js"></script>

<!-- 自定义js -->
<script src="approve_task.js"></script>


</body>

</html>
